<template>
	<view class="order-list">
		<view class="order-list__content">
			<view class="order-list__content-header">
				<u-tabs :list="orderTabList" :current="postStatus" lineWidth="0" keyName="label"
					:inactiveStyle="tabInactiveStyle" :lineColor="tabActiveStyle.color" :activeStyle="tabActiveStyle"
					@change="sectionChange"></u-tabs>
			</view>
			<view v-for="item in orderList" :key="item.id" @click="() => toDetailPage(item)">
				<OrderCard :create-time="item.createTime"
					:send-time="formatterDate(item.takePreTimeStart, item.takePreTimeEnd)" :orderState="item.orderState"
					:refundState="item.refundState" :price="item.itemList[0].goodsPrice"
					:img-url="item.itemList[0].goodsImages" :good-name="item.itemList[0].goodsName" />
			</view>

		</view>
		<st-empty-content v-if="orderList.length == 0 && !isLoading" text="未查询到数据"></st-empty-content>
		<view class="equipmentList__footer" v-if="isLoading">
			<u-loading-icon></u-loading-icon>
		</view>
	</view>
</template>

<script>
	import {
		orderList as orderTabList
	} from "@/common/orderConfig.js"
	import color from '@/uni_modules/uview-ui/libs/config/color.js'
	import OrderCard from "./components/order-card.vue"
	export default {
		components: {
			OrderCard
		},
		data() {
			return {
				tabActiveStyle: {
					color: color.error,
					fontSize: '19px'
				},
				tabInactiveStyle: {
					fontSize: '19px'
				},
				postStatus: 0,
				show: false,
				list: [{
						name: '删除',
					},
					{
						name: '取消'
					}
				],
				orderTabList,
				total: 0,
				current: 1,
				pageSize: 20,
				status: 'more',
				isLoading: false,
				orderList: []
			}
		},
		onLoad(options) {
			this.postStatus = Number(options.status)
		},
		onShow() {
			this.resetLoadStatus()
			this.getList()
		},
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.current++;
			this.getList();
		},
		onPullDownRefresh() {
			if (this.isLoading) return
			this.resetLoadStatus()

			this.getList().then(() => uni.stopPullDownRefresh())
		},
		computed: {

		},
		methods: {
			formatterDate(time1, time2) {
				if (time1 && time2) {
					const nTime1 = new Date(time1)
					const nTime2 = new Date(time2)
					const date = this.formatDate(nTime1)
					const startTime = this.formatTime(nTime1)
					const endTime = this.formatTime(nTime2)
					return `${date} ${startTime}~${endTime}`
				} else {
					return ''
				}
			},
			toDetailPage(order) {
				uni.navigateTo({
					url: '/pages/order/detail/detail?mallOrderId=' + order.mallOrderId
				})
			},
			sectionChange(tab) {
				this.postStatus = tab.value
				this.orderList = []
				this.getList()
			},
			getList() {
				this.isLoading = true
				const params = {
					size: this.pageSize,
					current: this.current,
					orderState: this.postStatus ? orderTabList[this.postStatus]['orderState'] : ''
				}
				return this.$u.api['order/getOrderList'](params).then(res => {
					const {
						total,
						rows
					} = res.data.data
					this.total = total

					if (rows.length > 0) {
						let newRecords = rows.map((item) => ({
							...item
						}));
						this.orderList = this.orderList.concat(newRecords)
					}
					if (this.total <= this.orderList.length) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
				}).finally(() => {
					this.isLoading = false
				})
			},
			resetLoadStatus() {
				this.current = 1
				this.orderList = []
				this.status = 'more'
			},

		}
	}
</script>

<style lang="scss">
	.order-list {
		&__content {

			&-header {
				background-color: #FFFFFF;
			}

			&-main {
				margin: 10rpx 0 15rpx;
				padding: 35rpx 50rpx 35rpx 41rpx;
				border-radius: 15rpx;
				background-color: #FFFFFF;

				&-top {
					display: flex;
					justify-content: space-between;
					margin: 0 0 30rpx 0;
				}

				&-center {
					display: flex;
					padding-top: 30rpx;

					&-info {

						padding: 0 0 0 20rpx;

						&-bottom {
							display: flex;
							align-items: center;

							&-count {
								display: fixed;
								left: 0;
								margin: 0 0 0 180rpx;
							}
						}
					}


				}

				&-bottom {
					display: flex;
					justify-content: space-between;
				}
			}

		}

		::v-deep .u-tabs__wrapper__nav {
			width: 90vw;
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;

			.tabs__wrapper__nav__item {
				flex: 1;
			}
		}
	}
</style>